var imgs = ["images/d1.jpg", "images/d2.jpg", "images/d3.jpg", "images/d4.jpg", "images/d5.jpg",
    "images/m1.jpg", "images/m3.jpg", "images/m4.jpg", "images/p1.jpg", "images/p2.jpg", "images/p30.jpg",
    "images/p4.jpg", "images/p5.jpg", "images/p6.jpg"];

var Block = function (row, col) {
    this.col = col;
    this.row = row;
    this.size = 50;
    this.dom = $("<div></div>");
}

/** 初始化游戏方块的图像 **/
Block.prototype.init = function () {
    var rp = Math.floor(Math.random() * imgs.length);
    this.ranImage = imgs[rp];
}

/* 显示游戏方块 */
Block.prototype.create = function () {
    var img_ = "<img src='" + this.ranImage + "' width='" + this.size + "' height='" + this.size + "'/>";
    this.dom.html(img_);  //dom是<div>元素，为<div>追加内容为<img .../>
    this.dom.css({
        "position": "absolute",
        "width": this.size,
        "height": this.size,
        "left": 300 + this.col * this.size,
        "top": 5 + this.row * this.size
    });
    $("body").append(this.dom);  //把dom加到页面中
}

/** 擦除方块上的图片（当连续点击的两个方块能用3条以为的直线相连时，就把它们擦除掉）**/
Block.prototype.erase = function () {
    this.dom.empty();  //清空dom,也就是<div>的<img>孩子
    var cav_ = "<canvas width='" + this.size + "' height='" + this.size + "'></canvas>";
    this.dom.html(cav_); //为清空的dom加个画布，为了画线。（擦除图片时要画线）
    this.ranImage = "";
}

Block.prototype.edgeErase = function () {
    this.dom.empty();
    this.dom.css("border", "0px");
    var cav_ = "<canvas width='" + this.size + "' height='" + this.size + "'></canvas>";
    this.dom.html(cav_); //为清空的dom加个画布，为了画线。（擦除图片时要画线）
}

//在当前方块中，画中心点到上边中点的连线
Block.prototype.drawUpLine = function () {
    var context = this.dom.find("canvas").get(0).getContext("2d");
    context.beginPath();
    context.moveTo(this.size / 2, this.size / 2);
    context.lineTo(this.size / 2, 0);
    context.stroke();
}

//在当前方块中，画中心点到下边中点的连线
Block.prototype.drawDownLine = function () {
    var context = this.dom.find("canvas").get(0).getContext("2d");
    context.beginPath();
    context.moveTo(this.size / 2, this.size / 2);
    context.lineTo(this.size / 2, this.size);
    context.stroke();
}

//在当前方块中，画中心点到左边中点的连线
Block.prototype.drawLeftLine = function () {
    var context = this.dom.find("canvas").get(0).getContext("2d");
    context.beginPath();
    context.moveTo(this.size / 2, this.size / 2);
    context.lineTo(0, this.size / 2);
    context.stroke();
}

//在当前方块中，画中心点到右边中点的连线
Block.prototype.drawRightLine = function () {
    var context = this.dom.find("canvas").get(0).getContext("2d");
    context.beginPath();
    context.moveTo(this.size / 2, this.size / 2);
    context.lineTo(this.size, this.size / 2);
    context.stroke();
}

var game = (function () {
    var places = [];  //放所有的方块
    var clickNumber = 0;  //记录点击鼠标的次数
    var clickObject1 = undefined;  //第1次单击的方块
    var clickObject2 = undefined;  //第2次单击的方块
    var canceled = 0;//已消除的图片数目
    var success = false;//是否成功

    /*
    下面方法是计算还没消除的图片数。
    */
    function isSuccess() {
        let sum = 0;
        for (let i = 0; i < places.length; i++) {
            for (let j = 0; j < places.length; j++) {
                if (places[i][j].dom.find("img").length == 1) {
                    sum++;
                }
            }
        }
        return sum;
    }

    /**
     下面的方法是调换图片。参数sum代表没有消除的图片数。
     如果还剩余5张图片没消除，那就从数组imgs中的前4个图片中随机选择图片来替换剩余的5张图片。
     */
    function change(sum) {
        for (let i = 0; i < places.length; i++) {
            for (let j = 0; j < places.length; j++) {
                if (places[i][j].dom.find("img").length == 1) {
                    var range = (sum - 1 <= imgs.length) ? sum - 1 : imgs.length;
                    var ranImage = imgs[Math.floor(Math.random() * range)];
                    var img_ = "<img src='" + ranImage + "' width='50' height='50'/>";
                    places[i][j].ranImage = ranImage;
                    places[i][j].dom.html(img_);
                }
            }
        }
    }

    function initGame(sizeX, sizeY) {
        for (let i = 0; i <= sizeX + 1; i++) {
            places[i] = [];
            for (let j = 0; j <= sizeY + 1; j++) {
                let b = new